<template>
    <div class="content-left">
        <div class="header">
            <p>线上热门搜索</p>
            <a>...</a>
        </div>
        <div class="pattern">
            <div class="pattern-left">
                <div class="childrenBox">
                    <p>搜索用户数</p>
                    <i class="el-icon-setting"></i>
                    <div class="box-1">
                        <p>{{userNumbers}}</p>
                        <p>{{dateUserNumber}}</p>
                        <a class="el-icon-caret-top"></a>
                    </div>
                </div>
                <div class="picture1" id="picture1"></div>
            </div>
            <div class="pattern-right">
                <div class="childrenBox">
                    <p>人均搜索次数</p>
                    <div class="box-1">
                        <p>8.2</p>
                        <p>43.08</p>
                        <a class="el-icon-caret-top"></a>
                    </div>
                </div>
                <div class="picture1" id="picture2"></div>
            </div>
            <div class="sheet">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">

                    <el-table-column
                            prop="name"
                            label="排名">
                    </el-table-column>
                    <el-table-column
                            prop="amount1"
                            sortable
                            label="搜索关键词">
                    </el-table-column>
                    <el-table-column
                            prop="amount2"
                            sortable
                            label="用户数">
                    </el-table-column>
                    <el-table-column
                            prop="amount3"
                            sortable
                            label="周涨幅">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import {getSearch} from '../../api/search_api'
import {getTableData} from '../../api/tableData_api'
    export default {
        name: "index",
        data() {
            return {
                userNumbers: 0,
                dateUserNumber: 64.32,
                tableData: []
            }
        },
        created() {
        },

        methods: {

            searchData(){
                getSearch().then(res => {
                    let data1 = res.data;
                    let data2 = data1.data;
                    for (let i = 0; i < data2.length; i++) {
                        this.userNumbers += data2[i].userNumber
                    }
                }).catch(err => {
                    console.error("热门搜索::", err)
                })

            },
            getTableData(){
                getTableData().then(res => {
                    let data1 = res.data;
                    let data2 = data1.data;
                    for (let i = 0; i < data2.length; i++) {
                        this.tableData = data2
                    }

                }).catch(err => {
                    console.error("热门搜索::", err)
                })

            },
        },

        mounted() {
            var chartDom = document.getElementById('picture1');
            var chartDom2 = document.getElementById('picture2');
            var myChart = this.$echarts.init(chartDom);
            var myChart2 = this.$echarts.init(chartDom2);
            var option = {
                tooltip: {
                    //鼠标悬停提示内容
                    trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
                },
                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    show: false,
                    type: 'value'
                },
                series: [{
                    trigger: 'axis',
                    data: [80, 93, 211, 143, 77, 146, 234, 155,135, 234, 323, 121],
                    type: 'line',
                    areaStyle: {},
                    // 显示数值
                    // itemStyle : { normal: {label : {show: true}}}
                }]

            };
            option && myChart.setOption(option);
            option && myChart2.setOption(option);
            this.searchData()
            this.getTableData()
        },

    }
</script>

<style scoped>
    p{
        margin: 0;
    }
    .content-left{
        position: relative;
        width: 48%;
        background: #ffffff;
    }
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 0 15px;
        border-bottom: 1px solid #d3d3d3;
    }
    /*.header p {*/
    /*    display: inline;*/
    /*}*/
    .header a {
        font-size: 20px;
    }
    .pattern {
        display: flex;
        justify-content: space-between;
        height: 150px;
    }
    .pattern .pattern-left {
        width: 360px;
        text-align: left;
    }
    .childrenBox p{
        font-size: 16px;
        padding: 15px 5px 0 15px;
        height: 20px;
    }
    .childrenBox i{
        position: absolute;
        top: 75px;
        left: 106px;
    }
    .childrenBox .box-1 p{
        display: inline-block;
        padding-right: 100px;
        font-size: 20px;
    }
    .childrenBox .box-1 p:nth-child(2){
        font-size: 14px;
        padding: 0;
        margin: 0;
    }
    .picture1{
        width: 300px;
        height: 80px;
    }
    .pattern-right{
        width: 360px;
        text-align: left;
    }
    .sheet{
        position: absolute;
        left: 15px;
        top: 200px;
        width: 630px;
    }
</style>
